<template>
	<view class="container">
		<tui-tabs :padding="40" :tabs="tabs" :isFixed="true" :currentTab="currentTab" selectedColor="#45B4B0" sliderBgColor="#45B4B0"
		 @change="change"></tui-tabs>
		<swiper  :duration="200" :style="{height: height}" :current="currentTab" @change="swiperChange">
			<swiper-item v-for="(item,index) in tabs" :key="index">
				<MainList :i="index" :index="currentTab" :tabs="tabs"></MainList>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MainList from "./main-list.vue";
	export default {
		components: {
			MainList
		},
		data() {
			return {
				height: "400px", // 需要固定swiper的高度
				tabs: [{
					name: "全部"
				}, {
					name: "生活"
				}, {
					name: "黑坑"
				}, {
					name: "教学"
				}, {
					name: "装备"
				}],
				currentTab: 0 // 当前tab的下标

			}
		},
		onLoad: function() {
			this.height = uni.getSystemInfoSync().windowHeight + 'px'
		},
		methods: {
			change(e) {
				this.currentTab = e.index
			},
			// 轮播菜单
			swiperChange(e) {
				this.currentTab = e.detail.current
			}
		}
	}
</script>

<style>

</style>
